<template>
	<view class="center">
		<view class="center-top">
			<view class="center-head">
				<!-- <image class="center-head-img" src="" mode=""></image> -->
				<view class="center-head-img" @click="cli_head">
					<!-- <open-data class="" type="userAvatarUrl"></open-data> -->
					<image class="center-head-img" :src=nickImg mode=""></image>
				</view>
			</view>
			<view class="center-num">
				<view class="center-num-name">
					<view v-if="nickname" class="">
						{{nickname}}
					</view>
					<view v-else class="" @click="cli_login">
						绑定账户
					</view>
				</view>
				<view class="center-num-data">
					<view class="center-num-data-box" @click="cli_month">
						<view class="center-num-data-box-num">
							{{num_jiesuan.agentMoney}}
						</view>
						<view class="center-num-data-box-name">
							<text>本月收益</text>
							<text class="center-num-data-box-name-right"></text>
						</view>
					</view>
					<view class="center-num-data-box" @click="cli_moneyHistory">
						<view class="center-num-data-box-num">
							{{num_jiesuan.allMoney}}
						</view>
						<view class="center-num-data-box-name">
							<text>历史结算</text>
							<text class="center-num-data-box-name-right"></text>
						</view>
					</view>
					<view class="center-num-data-box" @click="cli_repairBill">
						<view class="center-num-data-box-num">
							<text class="center-num-data-box-num-txt">共</text>
							<text class="center-num-data-box-num-txt-num">{{num_jiesuan.orderNum}}</text>
							<text class="center-num-data-box-num-txt">单</text>
						</view>
						<view class="center-num-data-box-name">
							<text>维修单</text>
							<text class="center-num-data-box-name-right"></text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="center-nav">
			<view class="center-nav-top">
				<view class="center-nav-top-left">
					<text class="center-nav-top-left-img"></text>
					<text class="center-nav-top-left-txt font_blod">我的店铺订单</text>
				</view>
				<!-- <view class="center-nav-top-right">
					<text class="center-nav-top-right-txt">全部</text>
					<image class="center-nav-top-right-img" src="https://www.zzzsyh.com/applets/agent/agent/arrows-right.png" mode=""></image>
				</view> -->
			</view>
			<view class="center-nav-bottom">
				<view class="center-nav-bottom-box" @click="cli_order(0)">
					<image class="center-nav-bottom-box-img" src="https://www.zzzsyh.com/applets/agent/agent/center-order-1.png" mode="">
					</image>
					<text class="center-nav-bottom-box-txt">全部</text>
				</view>
				<view class="center-nav-bottom-box" @click="cli_order(1)">
					<image class="center-nav-bottom-box-img" src="https://www.zzzsyh.com/applets/agent/agent/center-order-2.png" mode="">
					</image>
					<text class="center-nav-bottom-box-txt">待发货</text>
				</view>
				<view class="center-nav-bottom-box" @click="cli_order(2)">
					<image class="center-nav-bottom-box-img" src="https://www.zzzsyh.com/applets/agent/agent/center-order-3.png" mode="">
					</image>
					<text class="center-nav-bottom-box-txt">已发货</text>
				</view>
			</view>
		</view>
		<view class="center-advertising" @click="cli_goInvite">
			<image class="center-advertising-img" src="https://www.zzzsyh.com/applets/agent/agent/16.png" mode="">
			</image>
		</view>
		<view class="center-more">
			<view class="center-more-head">
				<text class="center-more-head-img"></text>
				<text class="center-more-head-txt font_blod">更多服务</text>
			</view>
			<view class="center-more-main">
				<view class="center-more-main-li">
					<view class="center-more-main-li-box" @click="cli_btfy">
						<image class="center-more-main-li-box-img" src="https://www.zzzsyh.com/applets/agent/agent/center-more-1.png" mode="">
						</image>
						<text class="center-more-main-li-box-txt">补助金审核</text>
					</view>
					<view class="center-more-main-li-box" @click="cli_go_notice">
						<image class="center-more-main-li-box-img" src="https://www.zzzsyh.com/applets/agent/agent/center-more-2.png" mode="">
						</image>
						<text class="center-more-main-li-box-txt">平台须知</text>
					</view>
					<view class="center-more-main-li-box" @click="cli_go_feedback">
						<image class="center-more-main-li-box-img" src="https://www.zzzsyh.com/applets/agent/agent/center-more-3.png" mode="">
						</image>
						<text class="center-more-main-li-box-txt">意见反馈</text>
					</view>
				</view>
				<view class="center-more-main-li">
					<view class="center-more-main-li-box" @click="cli_tjdzm">
						<image class="center-more-main-li-box-img" src="https://www.zzzsyh.com/applets/agent/agent/center-more-4.png" mode="">
						</image>
						<text class="center-more-main-li-box-txt">添加到桌面</text>
					</view>
					<view class="center-more-main-li-box" @click="cli_xxtz">
						<uni-badge size="small" :text=num_mess absolute="rightTop" type="error">
							<view class="center-more-main-li-box-jb">
								<image class="center-more-main-li-box-img" src="https://www.zzzsyh.com/applets/agent/agent/center-more-5.png"
									mode=""></image>
								<text class="center-more-main-li-box-txt">消息通知</text>
							</view>
						</uni-badge>
					</view>

					<view class="center-more-main-li-box">

					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="top">
			<!-- <view class="popup_tjdzm"> -->
				<image @click="cli_tjdzm_img" class="popup_tjdzm_img" src="https://www.zzzsyh.com/applets/agent/agent/30.png" mode=""></image>
			<!-- </view> -->
		</uni-popup>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	import allapis from '../../api/index.js'
	export default {
		data() {
			return {
				agentId: uni.getStorageSync('agentId'),
				nickname: uni.getStorageSync('nickname'),
				nickImg: uni.getStorageSync('nickImg'),
				num_mess: '',
				num_jiesuan: {
					agentMoney: 0,
					allMoney: 0,
					orderNum: 0
				},
				mheight: '',
			}
		},
		onShow() {
			// 未读的消息通知的条数
			this.getMessageNum()
			// 结算数值
			this.getServiceSettle()
			// 获取会长信息
			this.getAgentInfoById()
		},
		mounted() {
			// this.getHeight()
		},
		methods: {
			//  获取系统信息
			getHeight () {
				let _that = this
				uni.getSystemInfo({
					success: function (res) {
						_that.mheight = res.windowHeight + 'px'
					}
				});
			},
			// 点击头像
			cli_head() {
				console.log(1);
				uni.navigateTo({
					url: '/pages/centerOneself/centerOneself'
				})
			},
			// 点击本月收益
			cli_month () {
				uni.navigateTo({
					url: '/pages/centerEarnings/centerEarnings'
				})
			},
			// 历史结算
			cli_moneyHistory () {
				uni.navigateTo({
					url: '/pages/centerMoneyHistory/centerMoneyHistory'
				})
			},
			// 维修单
			cli_repairBill () {
				uni.navigateTo({
					url: '/pages/centerRepairBill/centerRepairBill'
				})
			},
			// 点击补贴复议
			cli_btfy () {
				uni.navigateTo({
					url: '/pages/centerSubsidy/centerSubsidy'
				})
			},
			// 点击我的店铺订单
			cli_order(val) {
				uni.navigateTo({
					url: '/pages/centerShopOrders/centerShopOrders?indexHead=' + val
				})
			},
			// 跳转到我的管辖区域
			cli_goInvite() {
				uni.navigateTo({
					url: '/pages/centerInvite/centerInvite'
				})
			},
			// 跳转到意见反馈
			cli_go_feedback () {
				uni.navigateTo({
					url: '/pages/centerFeedback/centerFeedback'
				})
			},
			// 跳转到消息通知
			cli_xxtz () {
				uni.navigateTo({
					url: '/pages/centerMessage/centerMessage'
				})
			},
			// 点击添加到桌面
			cli_tjdzm () {
				this.$refs.popup.open()
			},
			cli_tjdzm_img () {
				this.$refs.popup.close()
			},
			// 点击跳转平台须知
			cli_go_notice () {
				uni.navigateTo({
					url: '/pages/centerNotice/centerNotice'
				})
			},
			// 未读的消息通知的条数
			getMessageNum () {
				uni.request({
					url: allapi.getMessageNum,
					data: {
						agentId: this.agentId
					},
					success: (res) => {
						console.log(res);
						this.num_mess = res.data.data
					}
				})
			},
			// 会长个人中心 结算数值
			getServiceSettle () {
				uni.request({
					url: allapis.getServiceSettle,
					data: {
						agentId: this.agentId
					},
					success: (res) => {
						console.log(res);
						this.num_jiesuan = res.data.data
					},fail: (err) => {
						console.log(err);
					}
				})
			},
			// 点击获取头像昵称
			cli_login() {
				console.log(1111);
				let _that = this
				uni.getUserProfile({
					desc: '完善会员资料',
					success: (res) => {
						console.log(res);
						let dat = res.userInfo
						uni.setStorageSync('nickname',dat.nickName)
						uni.setStorageSync('nickImg',dat.avatarUrl)
						this.nickname = dat.nickName
						this.nickImg = dat.avatarUrl
						this.getLogin(dat.nickName, dat.avatarUrl)
					}
				});
			},
			getLogin (nickname, imgUrl) {
				let _that = this
				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
				    console.log(loginRes);
					let code = loginRes.code
					_that.saveAgentOpenId(code, nickname, imgUrl)
				  }
				});
			},
			// 会长授权获取头像昵称 保存openId
			saveAgentOpenId (code, nickname, imgUrl) {
				uni.request({
					url: allapis.saveAgentOpenId,
					data: {
						agentId: this.agentId,
						code: code,
						nickname: nickname,
						imgUrl: imgUrl
					},
					success: (res) => {
						console.log('绑定会长成功', res);
					}
				})
			},
			// 获取会长信息
			getAgentInfoById () {
				uni.request({
					url: allapi.getAgentInfoById,
					data: {
						agentId: this.agentId
					},
					success: (res) => {
						console.log('获取会长信息',res);
						let dat = res.data.data
						if (dat && dat.agentWximage) {
							uni.setStorageSync('nickImg',dat.agentWximage)
							this.nickImg = dat.agentWximage
						}
						if (dat && dat.agentNickname) {
							uni.setStorageSync('nickname',dat.agentNickname)
							this.nickname = dat.agentNickname
						}
					}
				})
			},
		}
	}
</script>

<style scoped>
	.center-top {
		height: 570rpx;
		background-image: url('https://www.zzzsyh.com/applets/agent/agent/15.png');
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.center-head {
		height: 442rpx;
		/* background: red; */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.center-head-img {
		width: 144rpx;
		height: 144rpx;
		background: #EEEEEE;
		border-radius: 50%;
		overflow: hidden;
	}

	.center-num {
		margin: 0 22rpx;
		height: 292rpx;
		background: #FFFFFF;
		margin-top: -200rpx;
		border-radius: 12rpx;
		padding-top: 0.1rpx;
		z-index: -1;
	}

	.center-num-name {
		height: 44rpx;
		line-height: 44rpx;
		color: #333333;
		margin-top: 74rpx;
		margin-bottom: 32rpx;
		text-align: center;
	}

	.center-num-data {
		/* height: 108rpx; */
		display: flex;
		justify-content: space-around;
	}

	.center-num-data-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.center-num-data-box-center {
		border-left: 1px solid #DDDDDD;
		border-right: 1px solid #DDDDDD;
	}

	.center-num-data-box-num {
		color: #333333;
		font-size: 36rpx;
		font-weight: 900;
	}

	.center-num-data-box-num-txt {
		font-size: 24rpx;
		color: #AAAAAA;
	}

	.center-num-data-box-num-txt-num {
		margin: 0 10rpx;
	}

	.center-num-data-box-name {
		font-size: 28rpx;
		color: #999999;
		margin-top: 6rpx;
		display: flex;
		align-items: center;
		height: 40rpx;
	}

	.center-num-data-box-name-right {
		width: 0;
		height: 0;
		border-top: 9rpx solid transparent;
		border-left: 11rpx solid #6A482C;
		border-bottom: 9rpx solid transparent;
		margin-left: 12rpx;
	}

	.center-nav {
		height: 224rpx;
		margin: 24rpx;
		margin-top: 0;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.center-nav-top {
		height: 74rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* border-bottom: 1px solid #DDDDDD; */
	}

	.center-nav-top-left {
		display: flex;
		align-items: center;
	}

	.center-nav-top-left-img {
		width: 10rpx;
		height: 34rpx;
		background: #58D26F;
		border-radius: 5rpx;
	}

	.center-nav-top-left-txt {
		margin-left: 24rpx;
		font-size: 32rpx;
		color: #333333;
	}

	.center-nav-top-right {
		display: flex;
		align-items: center;
	}

	.center-nav-top-right-txt {
		margin-right: 22rpx;
		font-size: 24rpx;
		color: #BBBBBB;
	}

	.center-nav-top-right-img {
		width: 12rpx;
		height: 22rpx;
	}

	.center-nav-bottom {
		/* height: 140rpx; */
		display: flex;
		/* justify-content: space-between; */
		margin-top: 36rpx;
	}

	.center-nav-bottom-box {
		margin: 0 58rpx;
		display: flex;
		flex-direction: column;
		/* justify-content: space-between; */
		align-items: center;
		/* width: 124rpx; */
	}

	.center-nav-bottom-box-img {
		width: 60rpx;
		height: 60rpx;
		/* background: #ccc; */
	}

	.center-nav-bottom-box-txt {
		font-size: 24rpx;
		color: #666666;
		margin-top: 6rpx;
	}

	.center-advertising {
		height: 160rpx;
		/* background: #FFFFFF; */
		margin: 0 24rpx;
	}

	.center-advertising-img {
		height: 160rpx;
		width: 100%;
	}

	.center-more {
		height: 420rpx;
		border-radius: 16rpx;
		background: #FFFFFF;
		margin: 24rpx;
		padding-top: 0.1px;
	}

	.center-more-head {
		height: 40rpx;
		line-height: 40rpx;
		margin-top: 26rpx;
		display: flex;
		margin-bottom: 42rpx;
	}

	.center-more-head-img {
		display: block;
		width: 10rpx;
		height: 34rpx;
		background: #58D26F;
		border-radius: 5rpx;
	}

	.center-more-head-txt {
		font-size: 32rpx;
		color: #333333;
		margin-left: 24rpx;
	}

	.center-more-main {
		margin: 0 20rpx;
	}

	.center-more-main-li {
		height: 134rpx;
		margin-bottom: 34rpx;
		display: flex;
	}

	.center-more-main-li-box {
		width: 236rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.center-more-main-li-box-jb {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.center-more-main-li-box-img {
		height: 64rpx;
		width: 64rpx;
		/* background: red; */
	}

	.center-more-main-li-box-txt {
		font-size: 24rpx;
		height: 34rpx;
		line-height: 34rpx;
		color: #666666;
		margin-top: 16rpx;
	}
	/* 添加到桌面样式 */
	.popup_tjdzm {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 66;
		background: rgba(0,0,0,0.5);
		display: flex;
		align-items: center;
	}
	.popup_tjdzm_img {
		width: 100%;
		height: 868rpx;
		width: 518rpx;
		margin-left: 132rpx;
		margin-top: 160rpx;
	}
</style>
